<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=parent.oUtil.langDir;
  document.write("<scr"+"ipt src='language/"+sLangDir+"/styles_cssText.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>
function doWindowFocus()
  {
  parent.oUtil.onSelectionChanged=new Function("realTime()");
  }
function bodyOnLoad()
  {
  loadTxt();

  window.onfocus=doWindowFocus;
  parent.oUtil.onSelectionChanged=new Function("realTime()");

  var obj=parent.oUtil.obj;

  arrStyle = obj.arrStyle;
  var sStyle=""
  for(var i=0;i<arrStyle.length;i++)
    {
    sStyle+=arrStyle[i][0]+"{"+ arrStyle[i][3]+"}"+ "\n"
    }

  var sHTML="<html><head><style>"+sStyle+"</style></head><body margin-left=0 margin-top=0 margin-right=0 margin-bottom=0 style='border:#808080 1px solid' id=idPreviewTarget></body></html>"
  var oDoc=idPreview.document.open("text/html", "replace");
  if(obj.publishingPath!="") oDoc.write("<base href=\""+obj.publishingPath+"\"/>" + sHTML);
  else oDoc.write(sHTML);
  oDoc.close();

  realTime();
  }
function bodyOnUnload()
  {
  parent.oUtil.onSelectionChanged=null;
  }
function realTime()
  {
  if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=parent.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  if(parent.oUtil.activeElement)
    {
    oElement=parent.oUtil.activeElement
    }
  else
    {
    if (oSel.parentElement) oElement=oSel.parentElement();
    else oElement=oSel.item(0);
    }

  var tagName=oElement.tagName;

  if(tagName=="TD")
    idPreview.document.all.idPreviewTarget.innerHTML="<table caption='styles_cssText_internal_use'><tr>" + oElement.outerHTML + "</tr></table>"
  else
    idPreview.document.all.idPreviewTarget.innerHTML=oElement.outerHTML

  inpCssText.value=oElement.style.cssText
  inpClassName.value=oElement.className;
  }

function doApply()
  {
  parent.oUtil.obj.setFocus();
  if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=parent.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();
  var sType=oEditor.document.selection.type;
  var obj=parent.oUtil.obj;

  parent.oUtil.obj.saveForUndo();

  if(inpCssText.value=="" && inpClassName.value=="")//Selalu berarti me-remove style & class di CURRENT TAG!
    {
    if (oSel.parentElement) oElement=oSel.parentElement();
    else oElement=oSel.item(0);

    if(oElement)
      {
      if(oElement.tagName!="BODY")
        {
        oElement.removeAttribute("style",0);
        oElement.removeAttribute("className",0);

        if(oElement.tagName=="FONT" && oElement.color=="" && oElement.face=="" && oElement.size=="" && oElement.id=="")
          obj.doCmd('RemoveFormat');
        }
      else
        {
        alert(getTxt("You're selecting BODY element."));
        return;
        }
      }
    }
  else if(parent.oUtil.activeElement)
    {
    oElement=parent.oUtil.activeElement

    if(inpCssText.value=="") oElement.removeAttribute("style",0);
    else oElement.style.cssText=inpCssText.value;

    if(inpClassName.value=="") oElement.removeAttribute("className",0);
    else oElement.className=inpClassName.value;
    }
  else
    {
    if (oSel.parentElement)
      {
      if(oSel.text=="")
        {
        oElement=oSel.parentElement();
        if(oElement)
          {
          if(oElement.tagName!="BODY")
            {
            if(inpCssText.value=="") oElement.removeAttribute("style",0);
            else oElement.style.cssText=inpCssText.value;

            if(inpClassName.value=="") oElement.removeAttribute("className",0);
            else oElement.className=inpClassName.value;
            }
          }
        }
      else
        {
        var idNewSpan=obj.applySpan();
        if(idNewSpan)//if there is selected text
          {
          if(inpCssText.value=="") idNewSpan.removeAttribute("style",0);//jadi kalo CSS Text input dibuat empty, tetap akan melakukan remove
          else idNewSpan.style.cssText=inpCssText.value;

          if(inpClassName.value=="") idNewSpan.removeAttribute("className",0);
          else idNewSpan.className=inpClassName.value;
          }
        }
      }
    else
      {
      oElement=oSel.item(0);
      if(oElement)
        {
        if(inpCssText.value=="") oElement.removeAttribute("style",0);
        else oElement.style.cssText=inpCssText.value;

        if(inpClassName.value=="") oElement.removeAttribute("className",0);
        else oElement.className=inpClassName.value;
        }
      }
    }

  realTime()

  //*** RUNTIME BORDERS ***
  obj.runtimeBorder(false);
  //***********************
  parent.oUtil.obj.bookmarkSelection();
  }

function doCssTextChange()
  {
  if(idPreview.document.all.idPreviewTarget.innerHTML.substring(0,1)=="<")//means there is a tag for the style to be applied. Kalau tdk ada berarti BODY.
    {
    if(idPreview.document.all.idPreviewTarget.innerHTML.substring(0,6)=="<TABLE")
      {
      if(idPreview.document.all.idPreviewTarget.childNodes[0].caption=="styles_cssText_internal_use")
        {//kalau yg di select text dalam table cell (TD)
        idPreview.document.all.idPreviewTarget.childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.cssText=inpCssText.value;
        idPreview.document.all.idPreviewTarget.childNodes[0].childNodes[0].childNodes[0].childNodes[0].className=inpClassName.value;
        }
      else
        {//kalau yg di select TABLE
        idPreview.document.all.idPreviewTarget.childNodes[0].style.cssText=inpCssText.value;
        idPreview.document.all.idPreviewTarget.childNodes[0].className=inpClassName.value;
        }
      }
    else
      {
      idPreview.document.all.idPreviewTarget.childNodes[0].style.cssText=inpCssText.value;
      idPreview.document.all.idPreviewTarget.childNodes[0].className=inpClassName.value;
      }
    }
  //else => BODY
  //  idPreview.document.all.idPreviewTarget.style.cssText=inpCssText.value;
  }
</script>
</head>
<body style="overflow:hidden;">

<table width="100%" height="300px" align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding:5px;">
  <table width=100%>
  <tr>
  <td nowrap>
    <div style='font-family:Verdana;font-size:10px;padding-bottom:3px'><b><span id="txtLang" name="txtLang">CSS Text</span>:</b></div>
    <textarea rows=8 style="width:100%;" id="inpCssText" name="inpCssText" onblur="doCssTextChange()" style="font-family:vardana;font-size:10px" class="inpTxt"></textarea>
  </td>
  </tr>
  <tr>
  <td nowrap>
    <span style='font-family:Verdana;font-size:10px;'><b><span id="txtLang" name="txtLang">Class Name</span>:</b></span>
    <input type="text" name="inpClassName" onblur="doCssTextChange()" style="width:225" class="inpTxt">
  </td>
  </tr>
  <tr>
  <td nowrap style="padding-top:5px;padding-bottom:5px">
    <iframe style="width:100%;height:75px;border:#777777 1px solid" frameborder="no" src="blank.gif" name=idPreview id=idPreview></iframe>
  </td>
  </tr>
  </table>
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding-top:10px;" align="right">
  <table cellpadding=0 cellspacing=0>
  <tr>
  <td>
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  </tr>
  </table>
</td>
</tr>
</table>

</body>
</html>